<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import { ElMessageBox, ElNotification} from "element-plus";
import {myStore} from "@/accespt/myStore.js";

const ms = myStore();

const total = ref(0);
const pageSize = ref(2);
const pageNum = ref(1);
const orderBy = ref('');
const list = ref([]);
const listCategory = ()=>{
    axios.post('/api/category/list',{order:orderBy.value,pageNum:pageNum.value,pageSize:pageSize.value})
        .then(res=>{
          const result = res.data;
          if (result.code===200){
            list.value = result.data.list;
            total.value = parseInt(result.data.total);
          }
        })
}
const changePageNum = (pageN)=>{
  pageNum.value = pageN;
  listCategory();
}
const sortList = (column)=>{
  console.log(column)
  let order = column.order;
  let prop = column.prop;
  if(order===null){
    orderBy.value = "";
    listCategory();
    return;
  }

  order = order==='ascending'?'asc':'desc';
  if (prop==="updateTime"){
    prop = "update_time"
  }
  orderBy.value = prop + " " + order;
  listCategory();
}

onMounted(()=>{
  //页面加载完成之后会自动执行
  listCategory();
})

//保存新的分类信息
const saveShow = ref(false);
const categoryInfo = ref({});
const openSave = ()=>{
  saveShow.value = true;
}
const closeSave = ()=>{
  saveShow.value = false;
  categoryInfo.value = {};
}
const save = ()=>{
  if (categoryInfo.value.title===''||categoryInfo.value.title===undefined){
    ElNotification({title: '提示', type: "error", message: "标题不能为空"})
    return;
  }
  if (categoryInfo.value.intro===''||categoryInfo.value.intro===undefined){
    ElNotification({title: '提示', type: "error", message: "简介不能为空"})
    return;
  }

  axios.post('/api/category/save',categoryInfo.value)
      .then(res=>{
        const result = res.data;
        ElNotification({title: '提示', type: result.code===200?'success':'error', message: result.msg})
        if (result.code===200){
          closeSave();
          listCategory();
        }
      })
}

//删除功能
const deleteById = (id)=>{
  //提示信息框
  ElMessageBox.confirm('您是否确定要删除', 'Warning', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }
  ).then(() => {
    //通过网络请求，删除数据
      axios.post('/api/category/delete',{id:id})
          .then(res=>{
            const result = res.data;
            ElNotification({title: '提示', type: result.code===200?'success':'error', message: result.msg})
            //如果删除成功， 我们需要刷新页面
            if (result.code===200){
              listCategory();
            }
          })
  })
}

//编辑
const openEdit = (id) =>{
  saveShow.value = true;
  axios.post('/api/category/get',{id:id})
      .then(res=>{
        const result = res.data;
        if (result.code===200){
          categoryInfo.value = result.data;
        }
      })
}
const edit = ()=>{
  if (categoryInfo.value.title===''||categoryInfo.value.title===undefined){
    ElNotification({title: '提示', type: "error", message: "标题不能为空"})
    return;
  }
  if (categoryInfo.value.intro===''||categoryInfo.value.intro===undefined){
    ElNotification({title: '提示', type: "error", message: "简介不能为空"})
    return;
  }
  axios.post('/api/category/edit',categoryInfo.value)
      .then(res=>{
        const result = res.data;
        ElNotification({title: '提示', type: result.code===200?'success':'error', message: result.msg})
        if (result.code===200){
          closeSave();
          listCategory();
        }
      })
}
const submit = ()=>{
  if (categoryInfo.value.id===''||categoryInfo.value.id===undefined){
    save();
  }else{
    edit();
  }
}

const uploadFile  = ref();
const upload = ()=>{
  const file = uploadFile.value.files[0]
  const formData = new FormData();
  formData.append("file",file);

  axios.post('/api/file/upload',formData)
      .then(res=>{
        const result = res.data;
        if (result.code===200){
          categoryInfo.value.surface = result.data;
        }
      })
}
</script>
<template>
<!--  添加修改弹出层-->
  <el-dialog
      v-model="saveShow"
      width="30%"
  >
    <span>
      <el-form :model="categoryInfo" label-width="auto" style="max-width: 300px">
        <el-form-item label="标题">
          <el-input  v-model="categoryInfo.title"/>
        </el-form-item>
        <el-form-item label="封面图" accept="png">
          <input type="file" ref="uploadFile" @change="upload">
        </el-form-item>
        <el-form-item label="简介">
          <el-input  type="textarea" v-model="categoryInfo.intro"/>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeSave">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <div>
    <el-button type="primary" @click="openSave">新增</el-button>
    <el-button type="primary" @click="listCategory">刷新</el-button>
  </div>

  <div>
    <el-table :data="list" style="width: 100%" @sort-change="sortList">
      <el-table-column fixed prop="id" label="编号" min-width="150" />
      <el-table-column prop="title" label="标题" min-width="120" />
      <el-table-column prop="surface" label="封面图" min-width="120" >
        <template #default="props">
          <img :src="'/api/file/get?name='+props.row.surface" style="width: 80px;"  alt=""/>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="简介" min-width="200" />
      <el-table-column prop="updateTime" sortable="custom" label="更新时间" min-width="120" >
        <template #default="props">
          {{ms.timeFormat(props.row.updateTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="120" >
        <template #default="props">
          {{ms.timeFormat(props.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="props">
          <el-button type="primary" size="small" @click="openEdit(props.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteById(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePageNum"/>
    </div>
  </div>

</template>

<style scoped>

</style>